/*
 * @Author: 于欣汝1 12613083+yu-xinru-1@user.noreply.gitee.com
 * @Date: 2023-04-13 16:04:46
 * @LastEditors: 于欣汝1 12613083+yu-xinru-1@user.noreply.gitee.com
 * @LastEditTime: 2023-04-21 21:51:38
 * @FilePath: \web-frontend\src\pages\base\contacts\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { tongji } from '@/services/api/contact';
import {  PageContainer} from '@ant-design/pro-components';
import { Button, Space } from 'antd';
  interface ProvinceData {
    name: string;
    value: number;
  }
  
  const Tongji = () => {
    const [isBar, setIsBar] = useState<boolean>(true);
    const [isPie, setIsPie] = useState<boolean>(true);
    const [isLine, setIsLine] = useState<boolean>(true);
    const [data,setData] = useState<Array<ProvinceData>>([]);
    useEffect(() => {
      const fetchData = async () => {
        try {
          const contact = await tongji();
          const provinceData = contact.reduce((a, b) => {
            const province = b.province;
            const index = a.findIndex((data) => data.name === province);
            if (index > -1) {
              a[index].value++;
            } else {
              a.push({
                name: province,
                value: 1,
              });
            }
            return a;
          }, [] as ProvinceData[]);
          setData(provinceData);
        } catch (error) {
          console.error(error);
        }
      };
      fetchData();
    }, []);

    useEffect(() => {
      const chart1 = echarts.init(document.getElementById('contact-chart') as HTMLDivElement);
    if (isBar) {
      chart1.setOption({
        title: {
          text: '省份统计',
        },
        xAxis: {
          type: 'category',
          data: data.map((item) => item.name),
        },
        yAxis: {
          type: 'value',
          data: data.map((item) => item.value),
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            data: data.map((item) => item.value),
          },
        ],
      });
    }
  }, [data, isBar]);
      const chart1 = () => {
        setIsBar((pre) => !pre);
      };
  useEffect(() => {
    const chart2 = echarts.init(document.getElementById('contact-chart') as HTMLDivElement);
    if (isPie) {
      chart2.setOption({
        title: {
        text: '省份统计',
      },
      tooltip: {},
      legend: {
        right: 'right'
      },
      toolbox: {
        show: true,  
      },
      xAxis: {
        data: [],
      },
      yAxis: {
        data: [],
      },
      series: [
      {
        name: '人数',
        type: 'pie',
        radius: '55%',
        data: data.map((item) => ({ value: item.value, name: item.name })),
      },
    ],
  });
}
}, [data, isPie]);
  const chart2= () => {
    setIsPie((pre) => !pre);
  };

  useEffect(() => {
    const chart3 = echarts.init(document.getElementById('contact-chart') as HTMLDivElement);
    if (isLine) {
      chart3.setOption({
      title: {
        text: '省份统计',
      },
      xAxis: {
        type: 'category',
        data: data.map((item) => item.name),
      },
      yAxis: {
        type: 'value',
        data: data.map((item) => item.value),
      },
      series: [
      {
        type: 'line',
        data: data.map((item) => item.value),
      },
    ],
  });
}
}, [data, isLine]);
  const chart3= () => {
    setIsLine((pre) => !pre);
  };

  return (
    <PageContainer>
      <div id="contact-chart" style={{ width:1000, height:500 ,margin:55}} />
      <Space wrap>
       <Button onClick={chart1}>柱状图
      </Button>
      <Button onClick={chart2}>饼状图
      </Button>
      <Button onClick={chart3}>折线图
      </Button>
      </Space>
    </PageContainer>
  );
};
export default Tongji;